import React, { Component } from 'react';
import jquery from 'jquery';

class RadioPicker1 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            activeValue: ''
        }
    }

    itemClick(value, label, e2) {
        e2.stopPropagation();
        this.setState({
            activeValue: value
        });
        this.props.onChange(value, label)

    }

    componentDidMount() {
        console.log(this.props.selected)
        this.setState({
            activeValue: (typeof this.props.selected !== 'undefined') ? this.props.selected : localStorage.getItem(this.props.name)==null ? 0 : localStorage.getItem(this.props.name)
        }, () => {
            this.props.groups.map((item) => {
                if (item.value == this.state.activeValue) {
                    if (this.props.onChange) {
                        this.props.onChange(item.value, item.label)
                    }
                }
            })
        })
    }

    render() {
        let items = this.props.groups.map((item) => {
            return (
                <span className="itemspan"  id={this.props.class} style={{ display:'inline-block', margin: '5px 20px 5px 0px', fontSize: '14px', color: '#666666' }} key={Math.random().toString(16).substring(2)} onClick={this.itemClick.bind(this, item.value, item.label)} >
                    <span className="dot1">
                        {(item.value == this.state.activeValue) ? <i></i> : null}
                    </span>
                    {item.label}
                </span>
            )
        })


        return (
            <div className="com-sel1"  id={this.props.name} onClick={(this.props.onClick) ? this.props.onClick.bind(this) : null}>
                {this.props.title ? <p className="title1">{this.props.title}</p> : null}
                {items}
            </div>
        )
    }
}

export default RadioPicker1